import React, { useState, useContext } from 'react';
import { Input, Checkbox, Popover, Button, Select, Radio, Space } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
const Dropdown = (props) => {
  const { label, show, handleObj, index, listLength, require, setting = 'day' } = props;
  const {
    handleUpdate,
    handleSelect,
    handleRemove,
    handleUp,
    handleDown,
    handleOption,
    handleRadius,
  } = handleObj;
  const content = (
    <div style={{ display: 'flex' }}>
      {index !== 0 && (
        <Button style={{ marginRight: 12 }} onClick={() => handleUp(index)} type="primary">
          上移
        </Button>
      )}
      {index !== listLength - 1 && (
        <Button style={{ marginRight: 12 }} type="primary" onClick={() => handleDown(index)}>
          下移
        </Button>
      )}
      <Button type="primary" onClick={() => handleRemove(index)}>
        删除
      </Button>
    </div>
  );
  return (
    <Popover placement={'bottom'} content={content} trigger="hover">
      <div
        onClick={(e) => {
          e.stopPropagation();
          handleSelect(index);
        }}
        className={`renderSetting_other ${show && 'renderSetting_textSelect'}`}
      >
        {show && (
          <div className="renderSetting_absoluteBox">
            <div className="renderSetting_absoluteTitle">日期</div>
            <div className="renderSetting_absoluteContent">
              <div className="renderSetting_content_title"></div>
              <div className="renderSetting_content_title">标题*</div>
              <div className="renderSetting_content_input">
                <Input
                  onChange={(e) => {
                    e.stopPropagation();
                    handleUpdate({
                      index: index,
                      key: 'label',
                      value: e.target.value,
                    });
                  }}
                  value={label}
                ></Input>
              </div>
              <div className="renderSetting_content_title">接受的日期格式*</div>
              <Radio.Group
                style={{ marginBottom: 12 }}
                onChange={(e) => {
                  e.stopPropagation();
                  handleRadius(index, e.target.value);
                }}
                value={setting}
              >
                <Radio value={'day'}>年月日</Radio>
                <Radio value={'month'}>年月</Radio>
              </Radio.Group>
              <div className="renderSetting_content_Select">
                <Checkbox
                  checked={require}
                  onChange={(e) => {
                    handleUpdate({
                      index: index,
                      key: 'require',
                      value: e.target.checked,
                    });
                  }}
                >
                  必填项
                </Checkbox>
              </div>
            </div>
          </div>
        )}
        <div className="renderSetting_label">
          {label}
          {require && <span className="renderSetting_required">*</span>}
        </div>
        <Select
          placeholder={setting === 'day' ? '年-月-日' : '年-月'}
          style={{ width: '100%', marginBottom: 12 }}
        ></Select>
      </div>
    </Popover>
  );
};
export default Dropdown;
